<template>
  <div id="accoutFormatBox">
    <el-button size="small" type="primary" @click="insertEvent()"
      >新增一行</el-button
    >
    <vxeGrid
      ref="vxeGrid"
      :customColumn="AccoutFormatColumnData"
      :gridData="AccoutFormatGridData"
      :setConfig="setConfig"
      :emptyRenderCon="emptyRenderCon"
      @pageChangeCallback="loadPageChange"
      @changeFunCallBack="loadChangefun"
      @cellStyleCallBack="loadCellStyle"
      @operateBtnClickCallback="loadOperateBtnClick"
      @operateBtnIsShowCallback="loadOperateBtnIsShow"
      @operateBtnIsDisabledCallback="loadOperateBtnIsDisabled"
      v-bind="$attrs"
    ></vxeGrid>
  </div>
</template>

<script>
import vxeGrid from "@/components/vxeGrid/vxeGrid.vue";
export default {
  name: "AccoutFormat",
  props: {
    CurrBookObj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      AccoutFormatColumnData: [
        {
          title: "图标",
          code: "myIcon",
          type: "icon",
          isVisiable: true,
          isEdit: false,
          config: {
            options: [
              { id: 1, className: "el-icon-delete" },
              { id: 2, className: "el-icon-s-tools" },
              { id: 3, className: "el-icon-phone" },
              { id: 4, className: "el-icon-eleme" },
            ],
          },
        },
        {
          title: "图片",
          code: "myImg",
          type: "img",
          isVisiable: true,
          isEdit: false,
          config: {
            src: "/static/img/401.f85649d.png",
            styleName: "height:24px;",
          },
        },
        {
          title: "文本",
          code: "province",
          type: "tooltipText",
          isVisiable: true,
          colWidth: "200px",
          headerCellStyle: "background-color:#0ff;",
          slots: {
            default({ row, column }) {
              // console.log(123234,row, column)
              let showName = row[column.property];
              return showName;
            },
          },
        },
        {
          title: "文本框",
          code: "city",
          type: "showInput",
          isVisiable: true,
          isEdit: true,
          colWidth: "200px",
        },
        {
          title: "文本框2",
          code: "name",
          type: "input",
          isVisiable: true,
          isEdit: true,
          colWidth: "200px",
        },
        {
          title: "数字框",
          code: "zip",
          type: "number",
          isVisiable: true,
          isEdit: true,
          colWidth: "120px",
        },
        {
          title: "数字金额框",
          code: "zip",
          type: "amount",
          isVisiable: true,
          isEdit: true,
        },
        {
          title: "下拉框",
          code: "select",
          type: "select",
          isVisiable: true,
          isEdit: true,
          colWidth: "240px",
          config: {
            multiple: true, // 是否多选,
            options: [
              {
                id: 1,
                label: "待处理",
              },
              {
                id: 2,
                label: "已处理",
              },
              {
                id: 3,
                label: "已审批",
              },
              {
                id: 4,
                label: "已完成",
              },
            ],
            props: { label: "label", id: "id", showType: "label" },
          },
        },
        {
          title: "下拉树",
          code: "selectTree",
          type: "selectTree",
          isVisiable: true,
          isEdit: true,
          colWidth: "160px",
          colWidth: "260px",
          config: {
            options: [
              {
                id: 1,
                label: "一级 1",
                children: [
                  {
                    id: 4,
                    label: "二级 1-1",
                    children: [
                      {
                        id: 9,
                        label: "三级 1-1-1",
                      },
                      {
                        id: 10,
                        label: "三级 1-1-2",
                      },
                    ],
                  },
                ],
              },
              {
                id: 2,
                label: "一级 2",
                children: [
                  {
                    id: 5,
                    label: "二级 2-1",
                  },
                  {
                    id: 6,
                    label: "二级 2-2",
                  },
                ],
              },
              {
                id: 3,
                label: "一级 3",
                children: [
                  {
                    id: 7,
                    label: "二级 3-1",
                  },
                  {
                    id: 8,
                    label: "二级 3-2",
                  },
                ],
              },
            ],
            multiple: true, // 是否多选,
          },
        },
        {
          title: "checkbox框",
          code: "checkbox",
          type: "checkboxs",
          isVisiable: true,
          isEdit: true,
          colWidth: "240px",
          config: {
            options: [
              { label: "语文", id: 1 },
              { label: "英语", id: 2 },
              { label: "数学", id: 3 },
            ],
            props: {
              // 当前选项配置 {label:'显示文本值',value:'当前选项绑定值'}
              label: "label",
              id: "id",
            },
            disabled: false,
          },
        },
        {
          title: "radios框",
          code: "radios",
          type: "radios",
          isVisiable: true,
          isEdit: true,
          colWidth: "240px",
          config: {
            options: [
              { label: "语文", id: 1 },
              { label: "英语", id: 2 },
              { label: "数学", id: 3 },
            ],
            props: {
              // 当前选项配置 {label:'显示文本值',value:'当前选项绑定值'}
              label: "label",
              id: "id",
            },
            disabled: false,
          },
        },
        {
          title: "rautoComplete框",
          code: "phonenumber",
          type: "autoComplete",
          isVisiable: true,
          isEdit: true,
          colWidth: "140px",
          config: {
            options: [
              { label: "篮球23222", id: "篮球23" },
              { label: "足球7222", id: "足球7" },
            ],
            props: {
              // 当前选项配置 {label:'显示文本值',value:'当前选项绑定值'}
              label: "label",
              id: "id",
            },
            disabled: false,
          },
        },
        {
          dataId: "gudis10",
          title: "switch框",
          code: "address",
          type: "switch",
          isVisiable: true,
          isEdit: true,
          colWidth: "140px",
          config: {
            activeValue: "1",
            inactiveValue: "0",
            activeText: "启用",
            inactiveText: "禁用",
            activeColor: "#f0f",
            inactiveColor: "#00f",
            disabled: false,
          },
        },
        {
          title: "日期",
          code: "datePicker",
          type: "datePicker",
          isVisiable: true,
          isEdit: true,
          colWidth: "140px",
        },
        {
          title: "季度",
          code: "quarterDatepicker",
          type: "quarterDatepicker",
          isVisiable: true,
          isEdit: true,
          colWidth: "140px",
        },
        {
          title: "附件列表",
          code: "upload",
          type: "jsonList",
          isVisiable: true,
          isEdit: true,
          colWidth: "200px",
          config: {
            props: {
              label: "name",
            },
            className: "uploadBox",
          },
        },
      ],
      emptyRenderCon: "没有查到数据！",
      AccoutFormatGridData1: [],
      AccoutFormatGridData: [
        {
          phonenumber: "1",
          name: "111王小76虎",
          province: "王小虎",
          city: "普陀区11",
          address: "0",
          zip: 200333,
          selectTree: [9, 10],
          select: [3, 4],
          checkbox: [2],
          radios: 3,
          datePicker: "2022-07-18",
          quarterDatepicker: "2022 3",
          myIcon: 3,
          isVisiableImg: false,
          timeConsumVO: [
            { name: "普陀区1", consumMinute: "2022-07-18" },
            { name: "普陀区222", consumMinute: "2022-02-12" },
          ],
          upload: [
            { name: "普陀区1.doc", createData: "2022-07-18" },
            { name: "普陀区222.doc", createData: "2022-02-12" },
          ],
        },
        {
          phonenumber: "2",
          name: "111王小664虎",
          province:
            "导入的信息，分支机构设置情况，分公司渠道支持团队和客户服务团队情况等。",
          city: "普陀区22",
          address: "0",
          zip: 200333,
          selectTree: [2, 3],
          select: [2],
          isEdit: false,
          datePicker: "2022-02-18",
          quarterDatepicker: "2022 2",
          myIcon: 2,
        },
        {
          phonenumber: "3",
          name: "111王34小虎",
          province: "1",
          city: "普陀区33",
          address: "1",
          zip: 200333,
          selectTree: [6],
          select: [1],
          myIcon: 1,
        },
        {
          phonenumber: "4",
          name: "222王34小虎",
          province: "0",
          city: "普陀区44",
          address: "0",
          zip: 200333,
          selectTree: [8],
          select: [2],
          myIcon: 4,
        },
        {
          phonenumber: "1",
          name: "222王65小虎",
          province: "1",
          city: "普陀区11",
          address: "1",
          zip: 200333,
          selectTree: [9],
          select: [1],
        },
      ],

      setConfig: {
        tableSetting: {
          isPageConfig: true,
          operate: true, //操作列
          operateBtnData: [
            {
              action: "download",
              name: "下载",
              isVisible: true,
              status: "success",
            },
            { action: "view", name: "查看", isVisible: true, status: "" },
          ],
          isShowAddBtn: false, //默认显示新增按钮
          isShowDeleteBtn: true, //默认显示删除按钮
          isShowEditBtn: true, //默认显示编辑按钮
          isShowDetailBtn: false, //默认显示详情按钮
        },
        tableToolbar: {
          title: "列表标题",
          isShowGridTitle: true, //是否显示表格标题
          search: true, //是否显示搜索框
          searchLabel: "关键字搜索", //
          searchPlaceholder: "请输入搜索内容", //
          import: true, //是否显示上传
          export: true, //是否显示下载
          zoom: true, // 是否显示全屏
          custom: true, // 是否显示自定义显示列头数据
        },
        tablePage: {
          totalResult: 5,
          currentPage: 1,
          pageSize: 5,
          pagerCount: 5,
          layouts: ["PrevPage", "Number", "NextPage"],
        },
      },
    };
  },

  inheritAttrs: false, // inheritAttrs的默认值为true, 将inheritAttrs的值设为false, 这些默认的行为会禁止掉。但是通过实例属性$attrs ,可以将这些特性生效，且可以通过v-bind 绑定到子组件的非根元素上
  components: {
    vxeGrid,
  },
  watch: {
    // AccoutFormatGridData:{
    //   handler(newVal, objVal){
    //     if(this.CurrBookObj){
    //       this.AccoutFormatGridData = this.CurrBookObj.casElementPOs;
    //     }
    //   } ,
    //   deep:true,
    //   immediate:false
    // }
  },
  created() {},
  mounted() {
    // console.log("this.setConfig.tablePage=========",this.setConfig.tablePage)
    // this.AccoutFormatGridData = this.CurrBookObj.casElementPOs;
  },
  methods: {
    insertEvent: function () {
      let record = {
        city: "要素名称",
        name: "要素类型",
      };
      this.$refs.vxeGrid.$refs.vxeGrid.insertAt(record);
      this.$refs.vxeGrid.$refs.vxeGrid.setActiveCell("city");
    },
    loadPageChange(currentPage, pageSize) {
      if (!this.setConfig.tableSetting.isPageConfig) {
        if (currentPage == 1) {
          this.AccoutFormatGridData = [
            {
              phonenumber: "1",
              name: "111王小76虎",
              province: "1",
              city: "普陀区11",
              address: "是",
              zip: 200333,
            },
            {
              phonenumber: "2",
              name: "111王小664虎",
              province: "5",
              city: "普陀区22",
              address: "否",
              zip: 200333,
            },
            {
              phonenumber: "3",
              name: "111王34小虎",
              province: "1",
              city: "普陀区33",
              address: "是",
              zip: 200333,
            },
          ];
        } else if (currentPage == 2) {
          this.AccoutFormatGridData = [
            {
              phonenumber: "4",
              name: "222王34小虎",
              province: "0",
              city: "普陀区44",
              address: "是",
              zip: 200333,
            },
            {
              phonenumber: "1",
              name: "222王65小虎",
              province: "1",
              city: "普陀区11",
              address: "是",
              zip: 200333,
            },
            {
              phonenumber: "2",
              name: "222王34小虎",
              province: "5",
              city: "普陀区22",
              address: "否",
              zip: 200333,
            },
          ];
        } else if (currentPage == 3) {
          this.AccoutFormatGridData = [
            {
              phonenumber: "3",
              name: "333王小虎46",
              province: "1",
              city: "普陀区33",
              address: "是",
              zip: 200333,
            },
            {
              phonenumber: "4",
              name: "333王小虎34",
              province: "0",
              city: "普陀区44",
              address: "是",
              zip: 200333,
            },
          ];
        }
      }
    },
    loadChangefun(row, column, key, val, curObj) {
      console.log("loadChangefun", row, column, key, val, curObj);
    },
    loadCellStyle(row, column) {
      // console.log("loadCellStyle", row, column);
    },
    loadOperateBtnClick(row, column, btnItem) {
      // console.log("loadOperateBtnClick", row, column, btnItem);
    },
    loadOperateBtnIsShow(row, column, btnItem) {
      // console.log("loadOperateBtnIsShow", row, column, btnItem);
      // row.isShowObj[btnItem.action] = true;
    },
    loadOperateBtnIsDisabled(row, column, btnItem) {
      // console.log("loadOperateBtnIsDisabled", row, column, btnItem);
      row.isDisableObj[btnItem.action] = false;
    },
  },
};
</script>

<style lang="less">
#accoutFormatBox {
  .uploadBox li:hover {
    color: #f00;
  }
   .uploadBox li {
    color: #0f0;
  }
}
</style>
